<template>
  <div class="add_dialog_content">
    <el-dialog :title="title" :visible="showDialog" :width="width" :close-on-click-modal="false" @close="close">
      <el-form ref="addFormRef" :model="addForm" :rules="addRules" label-width="110px">
        <el-row :gutter="24">
          <el-col :span="11">
            <el-form-item label="车辆名称" style="width: 100%;" prop="name">
              <el-input v-clearEmoji v-model="addForm.name" />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="车牌号" style="width: 100%;" prop="name">
              <el-input v-clearEmoji v-model="addForm.name" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="11">
            <el-form-item label="车辆品牌" style="width: 100%;" prop="name">
              <el-input v-clearEmoji v-model="addForm.name" />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="司机" style="width: 100%;" prop="name">
              <el-input v-clearEmoji v-model="addForm.name" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="11">
            <el-form-item label="车辆面积" style="width: 100%;" prop="name">
              <el-input v-clearEmoji v-model="addForm.name" />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="燃油类型" style="width: 100%;" prop="name">
              <el-input v-clearEmoji v-model="addForm.name" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="11">
            <el-form-item label="联系方式" style="width: 100%;" prop="name">
              <el-input v-clearEmoji v-model="addForm.name" />
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="车辆图片" prop="imgUrl">
              <el-upload
                v-if="!addForm.imgUrl"
                name="multipartFile"
                :limit="1"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload"
                list-type="picture-card"
                :action="action"
                :data="upData"
                :headers="headers"
                :on-error="fileUploadError"
                class="imgUpload"
              ><i size="12" class="el-icon-plus" /><br><span class="txt">上传</span></el-upload>
              <!-- <img v-if="addForm.imgUrl" :src="addForm.imgUrl" style="width: 70px;height: 70px;" alt=""> -->
              <template v-if="addForm.imgUrl">
                <div style="display: flex;width: 150px;">
                  <img v-if="addForm.imgUrl" :src="addForm.imgUrl" style="width: 70px;height: 70px;" alt="">
                  <div style="width: 70px;border-radius: 5px; border: 1px dashed #ccc;text-align: center;color:#ccc;margin-left: 5px;">
                    <i style=" cursor: pointer;" class="el-icon-delete" @click="delImg" />
                  </div>
                </div>
              </template>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="11">
            <el-form-item label="备注" style="width: 100%;" prop="name">
              <el-input v-clearEmoji v-model="addForm.name" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer" style=" border-top: 1px solid #bdbaba;padding: 0!important;">
        <div class="top" style="padding-top: 20px;padding-right: 8%;">
          <el-button v-if="!isShowBtn" type="primary" class="btnOk" @click="btnOk">确 定</el-button>
          <el-button v-if="isShowBtn" type="primary" class="btnOk" @click="btnOk">返 回</el-button>
          <el-button v-if="!isShowBtn" @click="close">取 消</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
export default {
  name: 'AddCarDialog',
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '新增'
    },
    width: {
      type: String,
      default: '35%'
    },
    isShowBtn: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      addForm: {
        name: '',
        imgUrl: ''
      },
      headers: { token: getToken() },
      action: process.env.VUE_APP_BASE_API + '/file/uploadFile',
      upData: {
        fileType: '0'
      },
      addRules: {
        name: [{
          required: true,
          message: '请输入商品名称',
          trigger: 'blur'
        }, {
          min: 1,
          max: 15,
          message: '长度在1到15个字符',
          trigger: 'blur'
        }, {
          pattern: /^[^\’\<\>\%\&\{\}\￥\@\$\'\"\【\】\\\/\ ]*$/,
          message: '不能输入特殊字符',
          trigger: 'blur'
        }
        ],
        producerArea: [{
          required: true,
          message: '请输入产地',
          trigger: 'blur'
        }, {
          min: 1,
          max: 15,
          message: '长度在1到15个字符',
          trigger: 'blur'
        }
        ],
        unit: [{
          required: true,
          message: '请输入商品单位',
          trigger: 'blur'
        }, {
          min: 1,
          max: 10,
          message: '长度在1到10个字符',
          trigger: 'blur'
        }, {
          pattern: /^[^\’\<\>\%\&\{\}\￥\@\$\'\"\【\】\\\/\ ]*$/,
          message: '不能输入特殊字符',
          trigger: 'blur'
        }
        ],
        imgUrl: [{
          required: true,
          message: '请上传图片',
          trigger: 'blur'
        }
        ],
        consumeNum: [{
          required: true,
          message: '请输入消耗数量',
          trigger: 'blur'
        }, {
          pattern: /^\+?[1-9]\d*$/,
          message: '只能输入正整数',
          trigger: 'blur'
        }
        ],
        maxExchange: [{
          required: true,
          message: '请输入最大兑换数量',
          trigger: 'blur'
        }, {
          pattern: /^([0-9]|10)$/,
          message: '只能输入1-10的整数',
          trigger: 'blur'
        }
        ]
      }
    }
  },
  methods: {
    close() {
      this.$emit('close')
    },
    btnOk() {
      // this.$emit('btnOk')
      this.$emit('update:showDialog', false)
    },
    btnReturn() {
      this.$emit('btnReturn')
    },
    handleAvatarSuccess(res, file) {
      this.addForm.imgUrl = this.$store.getters.imgBaseUrl + res.data.filePath + res.data.fileNewName
      console.log(res)
      console.log(this.addForm.imgUrl, 'img')
      this.$message.success('上传成功')
    },
    beforeAvatarUpload(file) {
      const fileName = file.name
      const fileType = fileName.substring(fileName.lastIndexOf('.'))
      const isOKType =
		fileType === '.jpg' ||
		fileType === '.png' ||
		fileType === '.jpeg'
      if (!isOKType) {
        this.$message.error('图片格式只能为jpeg/png/jpg')
      }

      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isLt2M) {
        this.$message.error('图片大小不能超过 2MB!')
      }
      return isLt2M && isOKType
    },
    fileUploadError(res) {
      this.$message.error(res.message)
    }
  }

}
</script>

<style scoped lang="scss">
.add_dialog_content{
  background-color: #fff;
}
.imgUpload{
      ::v-deep .el-upload:hover {
        border-color: #409EFF;
      }
      ::v-deep .el-upload {
        position: relative;
        margin-bottom: 10px;
        margin-left: 5px;
        width: 70px;
        height: 70px;
        line-height: 30px;
        padding-top: 5px;
      }
      .txt{
        color: #595858;
        font-size: 12px;
      }
    }
    .el-upload--picture-card i{
  font-size: 12px !important;
}
</style>
<style>

.el-dialog__header {
  border-bottom: 1px solid #bdbaba;
}

.el-dialog__title {
  font-size: 18px;
  color: #000;
}
div.el-dialog__footer{
  padding-top: 0;
  padding-left: 0;
  padding-right: 0;
}

</style>
